<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog  abnormalTicket-dialog">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="'abnormalTicket.title' | translate"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="workInfoPanel">
                <div class="workInfoPanel-left">
                    <!-- 檢驗單編號 qc_form_no -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.qc_form_no' | translate"></label>
                        <label class="value" ng-bind="dialog.qc_form_no"></label>
                    </div>
                    <!-- 作業站 op_no -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.op_no' | translate"></label>
                        <label class="value" ng-bind="dialog.op_no"></label>
                    </div>
                    <!-- 品號類別 item_type  -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.item_type' | translate"></label>
                        <label class="value" ng-bind="dialog.item_type"></label>
                    </div>
                    <!-- 品號 item_no -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.item_no' | translate"></label>
                        <label class="value" ng-bind="dialog.item_no"></label>
                    </div>
                    <!-- 品號名稱 item_name -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.item_name' | translate"></label>
                        <label class="value" ng-bind="dialog.item_name"></label>
                    </div>
                    <!-- 規格 spec -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.item_spec' | translate"></label>
                        <label class="value" ng-bind="dialog.spec"></label>
                    </div>
                    <!-- 單位 unit -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.unit' | translate"></label>
                        <label class="value" ng-bind="dialog.unit"></label>
                    </div>
                    <div class="kmi-text-fields">
                        <!-- 檢驗數量 ok_qty  -->
                        <label class="label" ng-bind="'abnormalTicket.inspect_qty' | translate"></label>
                        <label class="value" ng-bind="dialog.ok_qty"></label>
                        <!-- 驗退數量 return_qty -->
                        <label class="label" ng-bind="'abnormalTicket.return_qty' | translate"></label>
                        <label class="value" ng-bind="dialog.return_qty"></label>
                        <!-- 損壞數量 scrap_qty -->
                        <label class="label" ng-bind="'abnormalTicket.damage_qty' | translate"></label>
                        <label class="value" ng-bind="dialog.scrap_qty"></label>
                    </div>
                    <!-- 異常原因 abnormal_reason -->
                    <div class="kmi-text-fields" style="padding-top: 8px;">
                        <label class="label" ng-bind="'abnormalTicket.abnormal_reason' | translate"></label>
                        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime" ng-click="dialog.load_abnormal_reason();">
                            <img src="image/icons/add.png"></img>
                        </button>
                    </div>
                </div>
                <div class="workInfoPanel-right">
                    <!-- 主分類編號 m_class_no -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.main_class_no' | translate"></label>
                        <input ng-model="dialog.m_class_no" readonly="readonly" ng-click="dialog.load_m_class_No();">
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    </div>
                    <!-- 第一處理群組 first_group -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.first_handle_group' | translate"></label>
                        <input ng-model="dialog.first_group" readonly="readonly" ng-click="dialog.load_first_group();">
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    </div>
                    <!-- 最後處理群組 final_group -->
                    <div class="kmi-text-fields">
                        <label class="label" ng-bind="'abnormalTicket.final_handle_group' | translate"></label>
                        <input ng-model="dialog.final_group" readonly="readonly" ng-click="dialog.load_final_group();">
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                    </div>
                    <!-- 異常說明 hold_description -->
                    <div class="kmi-text-fields fields-description">
                        <label class="label" ng-bind="'abnormalTicket.abnormal_description' | translate"></label>
                        <textarea ng-model="dialog.hold_description"></textarea>
                    </div>
                    <!-- 異常照片 -->
                    <div class="kmi-text-fields fields-description">
                        <label class="label" ng-bind="'abnormalTicket.abnormal_photo' | translate"></label>
                        <div class="image-report">
                            <div class="pic-list" ng-if="dialog.picSrcArray.length != 0">
                                <div class="pic-item" ng-repeat="pic in dialog.picSrcArray track by $index">
                                    <div class="pic-item-title">
                                        <span style="color:white;margin:0px;position:absolute;top:10px;left:10px;">{{'#'+($index+1)}}</span>
                                        <button class="mdl-button mdl-button--icon pic-delete" ng-click="dialog.pic_delete($index);">
                                                <img src="image/icons/close.png"></img>
                                        </button>
                                    </div>
                                    <img class="pic-img" ng-src="{{'data:image/jpeg;base64,'+pic.picSrc}}" ng-click="dialog.pic_open($index)">
                                </div>
                            </div>
                            <img class="pic-background" src="image/icons/picture.png" ng-if="dialog.picSrcArray.length == 0">
                        </div> 
                    </div>  
                    <div class="kmi-text-fields" style="padding-left: 120px;">
                        <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime" ng-click="dialog.pic_add($event);">
                            <img src="image/icons/add.png"></img>
                        </button>
                    </div>      
                </div>
            </div>
            <!-- 異常原因項目 abnormalList-->
            <div class="kmi-list column-selector" style="margin-bottom: 10px; width: 95%; max-height: 30%;">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'abnormalTicket.abnormal_list.reason_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'abnormalTicket.abnormal_list.reason_name' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'abnormalTicket.abnormal_list.second_class_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'abnormalTicket.abnormal_list.description' | translate"></div>
                    <div class="kmi-list__column" style="flex: 0 0 40px;"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.abnormalList">
                        <!-- 異常原因編號 hold_item_no -->
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.hold_item_no"></div>
                        <!-- 異常原因名稱 hold_item_name -->
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.hold_item_name"></div>
                        <!-- 次分類編號 s_class_no -->
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.s_class_no"></div>
                        <!-- 說明 memo -->
                        <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.memo"></div>
                        <div class="kmi-list__column" style="flex: 0 0 40px;">
                            <button class="mdl-button mdl-button--icon" ng-click="dialog.removeRow(item)">
                                <img src="image/icons/delete.png"></img>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-footer">
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1" ng-click="dialog.confirm();">
              <i class="material-icons">done</i>
            </button>
        </div>
    </div>
</div>
